<template>
  <div class="container" style="height: 100vh;width: 300px;padding: 20px;box-sizing: border-box;width: 100%;">
    <header>
      <MBreadcrumb :item="breadcrumbItem" />
    </header>
    <main>
      <MTitle class="title">
        <template #left>
          生产计划
        </template>
      </MTitle>
      <table id="attributeTable" class="mtable">
        <tr class="mtr">
          <td class="field">产品型号</td>
          <td class="value">
            <MInput v-model="ProductInfo[0]" style="font-size: 12px;width: 100%" disabled>
            </MInput>
          </td>
        </tr>
        <tr class="mtr">
          <td class="field">产品名称</td>
          <td class="value">
            <MInput v-model="ProductInfo[1]" style="font-size: 12px;width: 100%" disabled>
            </MInput>
          </td>
        </tr>
        <tr class="mtr">
          <td class="field">需生产数量</td>
          <td class="value">
            <MInput v-model="ProductInfo[2]" style="font-size: 12px;width: 100%" disabled>
            </MInput>
          </td>
        </tr>
        <tr class="mtr">
          <td class="field">已生产数量</td>
          <td class="value">
            <MInput v-model="ProductInfo[3]" style="font-size: 12px;width: 100%" disabled>
            </MInput>
          </td>
        </tr>
      </table>
      <MTitle class="title">
        <template #left>
          生产信息
        </template>
      </MTitle>
      <MTable :headers="tableHeaders" :rows="tableRows" style="margin-top: 20px;" />

    </main>
    <footer>
      <div style=" text-align: center;" v-if="!isDisable">
        <MButton @click="planFinish">计划完成</MButton>
      </div>
    </footer>
    <MMessage v-if="toastVisible" :message="toastMessage" :state="toastState" />
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';
import MBreadcrumb from "../../components/MBreadcrumb.vue"
import MTitle from "../../components/MTitle.vue"
import MTable from "../../components/MTable.vue"
import MButton from "../../components/MButton.vue"
import MInput from "../../components/MInput.vue"
import MMessage from '../../components/MMessage.vue';

import normal from "../../../public/image/normal.png"
import right from "../../../public/image/right.png"

import axios from "../../axios/axios"
export default {
  name: "ProduceInfo",
  components: {
    MBreadcrumb,
    MTitle,
    MTable,
    MButton,
    MInput,
    MMessage,
  },
  setup() {
    const toastVisible = ref(false)
    const toastMessage = ref("")
    const toastState = ref("success")
    const breadcrumbItem = ref(
      {
        key: "0",
        title: '赋码管理',
        children: {
          key: "0-0",
          title: '计划完成',
        }
      })
    const ProductInfo = ref(["", "", "", ""])
    const tagItems = ref([])
    const params = ref([])
    const userId = ref("")
    const orderInfo = ref({})
    const produceInfo = ref({})
    const isDisable = ref(false)

    const tableHeaders = [
      { id: 1, text: '生产产品名称', width: "36%" },
      { id: 2, text: '型号', width: "28%" },
      { id: 3, text: '日期', width: "18%" },
      { id: 4, text: '数量', width: "18%" }
    ]
    const tableRows = ref([
      ['', '', '', ""],
    ])
    const planFinish = () => {

      if (produceInfo.value.planstate !== "2") {
        axios.post("/produce/updatebyid", {
          id: produceInfo.value.id,
          finishtime: getCurrentDate(),
          planstate: "2",
        }).then(res => {
          if (res.data.Code === "200") {
            produceInfo.value.planstate = "2"
          }
        })
        // axios.post("/order/updatebyid", {
        //   id: orderInfo.value.id,
        //   orderstate: "4",
        // }).then(res => {
        //   if (res.data.Code === "200") {
        //     orderInfo.value.orderstate = "4"
        //   }
        // })

        axios.get("/step/sendstep?type=planFinish&userId=" + params.value.get('userId') + "&trainingId=" + params.value.get('trainingId')).then(() => {
          messageShow("计划完成", "success")
        })
      } else {
        messageShow("已完成", "warning")
      }



    }
    const messageShow = (msg, state) => {
      toastMessage.value = msg;
      toastVisible.value = true;
      toastState.value = state
      // 使用 setTimeout 模拟 Toast 组件内部的定时器功能（仅用于演示）
      // 在实际使用中，你应该依赖 Toast 组件内部的定时器
      setTimeout(() => {
        toastVisible.value = false;
      }, 3000); // 与 Toast 组件中的 duration 属性保持一致
    }
    function getCurrentDate() {
      const now = new Date();
      const year = now.getFullYear();
      const month = String(now.getMonth() + 1).padStart(2, '0');
      const day = String(now.getDate()).padStart(2, '0');

      return `${year}-${month}-${day}`;
    }
    onMounted(() => {
      // 获取 URL 参数
      const param = new URLSearchParams(window.location.search);
      params.value = param
      if (param.has('userId')) {
        userId.value = param.get('userId');
      }
      if (param.has('isDisable')) {
        isDisable.value = param.get('isDisable') === "true"
      }
      axios.get('/order/select?userId=' + param.get('userId') + "&trainingId=" + param.get('trainingId') + "&isPart=0")
        .then(response => {
          var info = response.data.Data
          orderInfo.value = info
          axios.get('/tv/select')
            .then(response1 => {
              var info1 = response1.data.Data
              var tvInfo = ""
              info1.map(obj => {
                if (obj.productmodel === info.productmodel) {
                  tvInfo = obj
                }
              })
              axios.get('/produce/selectbyinfo?userId=' + param.get('userId') + "&trainingId=" + param.get('trainingId'))
                .then(response2 => {
                  var data = response2.data.Data
                  produceInfo.value = data
                  ProductInfo.value = [info.productmodel, tvInfo.productname, info.goodsnumber, data.producenumber]
                  tableRows.value[0] = [tvInfo.productname, info.productmodel, getCurrentDate(), info.goodsnumber]
                })
            })
        })
    });
    return {
      toastVisible,
      toastMessage,
      toastState,
      breadcrumbItem,
      tagItems,
      ProductInfo,
      produceInfo,
      normal,
      right,
      tableHeaders,
      tableRows,
      isDisable,
      messageShow,
      planFinish
    };
  },
};
</script>

<style scoped>
.title {
  margin-top: 30px;
}

.title1 {
  margin-top: 20px;
}

.mtr {
  display: flex;
  flex-wrap: wrap;
  /* 允许子元素换行 */
  align-items: flex-start;
}

.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

footer {
  text-align: center;
  height: 10%;
}

main {
  flex: 1;
}

.mtable {
  width: 100%;
  font-size: 13px;

}

.field {
  text-align: left;
  padding: 4px 0;
  flex: 1 1 60px;
  word-break: break-word;
  /* 允许长单词换行 */
  overflow-wrap: break-word;
  min-width: 0;
  /* 确保内容可以缩小 */
  height: 26px;
  line-height: 26px;
}

.value {
  text-align: right;
  padding: 4px 0;
  flex: 1 1 170px;
  word-break: break-word;
  /* 允许长单词换行 */
  overflow-wrap: break-word;
  min-width: 0;
  height: 26px;
  line-height: 26px;
  /* 确保内容可以缩小 */
}
</style>